<template>
  <el-card
    class="card"
    :body-style="{ display: 'flex', justifyContent: 'space-between' }"
  >
    <el-text>
      <el-icon>
        <Tickets />
      </el-icon>
      数据列表
    </el-text>
    <el-button type="primary" @click="createEdit">添加</el-button>
  </el-card>
  <!-- 数据表格 -->
  <el-table
    :data="myTableDataReal.tableDataReal as []"
    border
    style="width: 100%"
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ textAlign: 'center' }"
  >
    <el-table-column prop="id" label=" 编号" />
    <el-table-column prop="title" label=" 菜单名称" />
    <el-table-column prop="level" label=" 菜单级数" :formatter="myLevel" />
    <el-table-column prop="name" label=" 前端名称" />
    <el-table-column prop="icon" label=" 前端图标">
      <template #default="scope">
        <span :class="`iconfont icon-${scope.row.icon}`"></span>
      </template>
    </el-table-column>
    <el-table-column prop="hidden" label=" 是否显示">
      <template #default="scope">
        <el-switch
          v-model="scope.row.hidden"
          :active-value="0"
          :inactive-value="1"
          @change="chanSwitch(scope.row)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label=" 排序" />
    <el-table-column prop="Address" label=" 设置">
      <template #default="scope">
        <el-button
          type="primary"
          link
          @click="showChildrenData(scope.row.id)"
          :disabled="scope.row.level === 0 ? false : true"
          >查看下级</el-button
        >
      </template>
    </el-table-column>
    <el-table-column prop="Address" label=" 操作">
      <template #default="scope">
        <el-button type="primary" link @click="updateEdit(scope.row.id)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <div class="pagination">
    <el-pagination
      v-model:current-page="myTableDataReal.pagination.pageNum"
      v-model:page-size="myTableDataReal.pagination.pageSize"
      :page-sizes="[5, 10, 15]"
      background
      :total="myTableDataReal.pagination.total"
      layout="total,sizes, prev, pager, next,jumper"
      @size-change="myTableDataReal.handleSizeChange"
      @current-change="myTableDataReal.handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { Tickets } from "@element-plus/icons-vue";
import { ref, reactive, computed, onMounted, watchEffect } from "vue";
// list接口
import { menu } from "../../json/request/api";
import useMenuList from "../../hooks/useMenuList";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
let router = useRouter();
const route = useRoute();
// 添加后台菜单
let createEdit = () => {
  router.push("/ums/addMenu");
};
//修改后台菜单
let updateEdit = (id: number) => {
  router.push({
    path: "/ums/addMenu",
    query: {
      id,
    },
  });
};
// 表单需要的数据
let myTableDataReal = reactive({
  tableDataReal: [],
  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    totalPage: 0,
  },
  handleSizeChange: () => {},
  handleCurrentChange: () => {},
});
let parentId = ref(0);
// 跟新数据的函数
function reNew(id: number) {
  let res: any = useMenuList(menu.menuList, {
    parentId: id,
  });
  myTableDataReal.tableDataReal = res.tableData;
  myTableDataReal.pagination = res.pagination;
  myTableDataReal.handleCurrentChange = res.handleCurrentChange;
  myTableDataReal.handleSizeChange = res.handleSizeChange;
}
onMounted(() => {
  reNew(0);
});
//监听路由的变化,完成表现,跳转分离
watchEffect(() => {
  if (route.fullPath === "/ums/menu") {
    reNew(0);
  } else {
    if (route.query.pid) {
      let id = reNew(Number(route.query.pid));
    }
  }
});
// 更新表单处理函数
let showChildrenData = async (id: number) => {
  reNew(id);
  router.push(`menu?pid=${id}`);
};
// 数据处理函数
//1.展示权限等级
let myLevel = (row: IMneuItem) => {
  switch (row.level) {
    case 0:
      return "一级";
    case 1:
      return "二级";
    default:
      return "没有等级";
  }
};
//改变菜单的显示
let chanSwitch = (scope: any) => {
  menu
    .updateHidden({
      id: scope.id,
      hidden: scope.hidden,
    })
    .then(() => {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    })
    .catch(() => {
      ElMessage({
        message: "修改成功",
        type: "error",
      });
    });
};
</script>
<style scoped>
.card {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  float: right;
}
</style>
